<template>
  <div class="shoppingCart">
    <div class="goods_box">
      <div
        class="goodsItem"
        v-for="(item, index) in shoppingCartList"
        :key="index"
      >
        <p class="goodsItemTitle">
          <span>时间：{{ item.shijian_gouwuche }}</span>
          <van-icon size="18" name="delete" />
        </p>
        <!-- 商品 -->
        <div class="goodsIteminfo">
          <van-checkbox
            icon-size="18px"
            v-model="item.checked"
            @click="itemChange(index)"
          ></van-checkbox>
          <div class="goodsIteminfoImg">
            <img :src="item.cp_tupian" alt="图片" />
          </div>
          <div class="goodsIteminfoMsg">
            <h5>{{ item.cp_mingcheng }}</h5>
            <p class="tips">{{ item.info }}</p>
            <p class="setPrice">
              <span style="color: #ee0a24">￥{{ item.jiage }}</span>
              <van-stepper
                v-model="item.cp_shuliang"
                @change="increase(item)"
              />
            </p>
          </div>
        </div>
      </div>

      <!-- 空 提示 -->
      <van-empty
        v-if="shoppingCartList.length === 0"
        description="购物车为空"
      />
      <!-- 提交订单 price的单位是（分）-->
      <van-submit-bar
        style="bottom: 51px;"
        :price="total.totalPrice"
        :button-text="'提交订单(' + total.totalNum + ')'"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allCheck" @click="onchange">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <!-- 底部导航 -->
    <PageTabs :childActive="2"></PageTabs>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
import PageTabs from "@/components/PageTabs";
export default {
  name: "shoppingCart",
  components: {
    PageTabs,
  },
  data() {
    return {
      value: 1,
      allCheck: false,
      shoppingCartList: [], //购物车列表
    };
  },
  computed: {
    total() {
      let _pro = this.shoppingCartList.filter((val) => val.checked);
      var totalPrice = 0;
      for (var i = 0; i < _pro.length; i++) {
        totalPrice += _pro[i].cp_shuliang * _pro[i].jiage * 100;
      }
      return {
        totalNum: _pro.length,
        totalPrice: totalPrice,
        checkedArr: _pro,
      };
    },
  },
  mounted() {
    this.$toast.loading({
      mask: true,
      duration: 0,
      message: "加载中...",
    });
    this.getshoppingCartList();
  },
  methods: {
    getshoppingCartList() {
      SERVE.getshoppingCartList({
        params: {
          uid: window.localStorage.u_id,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.shoppingCartList = res.data;
          for (let item of this.shoppingCartList) {
            item.info = `库存：${item.cp_kucu}件 | 已销：${item.cp_yixiaoshou}件`;
            item.checked = false;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err", err);
        });
    },
    onSubmit() {
      if (this.total.totalNum === 0) {
        return this.$toast("请先选择商品");
      }
      let ids = [];
      for (let item of this.total.checkedArr) {
        ids.push(item.gwc_id);
      }
      let idsStr = ids.map((val) => val).join(",");
      this.$router.push({ path: "/paymentOrder", query: { ids: idsStr } });
    },
    onchange() {
      let tempArr = [];
      for (let value of this.shoppingCartList) {
        value.checked = this.allCheck;
        tempArr.push(value);
      }
      this.shoppingCartList = tempArr;
      tempArr = [];
    },
    itemChange(index) {
      this.$set(this.shoppingCartList, index, this.shoppingCartList[index]);
      for (let item of this.shoppingCartList) {
        if (!item.checked) {
          return (this.allCheck = false);
        }
      }
      this.allCheck = true;
    },
    // 改变商品数量
    increase(item) {
      SERVE.saveGoodsNum({
        params: {
          cs_user_id: window.localStorage.u_id,
          cs_gwc_id: item.gwc_id,
          cs_cp_shu: item.cp_shuliang,
        },
      })
        .then((res) => {
          console.log("", res);
        })
        .catch((err) => {
          console.log("", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.shoppingCart {
  .goods_box {
    height: calc(100vh - 101px);
    overflow-y: scroll;
    background-color: #f2f2f2;
    .goodsItem {
      background-color: #fff;
      margin-bottom: 6px;
      .goodsItemTitle {
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding: 0 15px;
        box-sizing: border-box;
        color: #808080;
        font-size: 14px;
      }
      .goodsIteminfo {
        min-height: 100px;
        padding: 0 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        word-break: break-all;
        margin-bottom: 8px;
        .goodsIteminfoImg {
          width: 80px;
          height: 80px;
          margin: 0 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .goodsIteminfoMsg {
          width: calc(100% - 118px);
          height: 100%;
          padding: 10px 0;
          box-sizing: border-box;
          h5 {
            margin: 0;
          }
          .tips {
            font-size: 12px;
            margin: 6px 0;
          }
          .setPrice {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
